<template>
    <div>
        <div class="tongji">

            <div class="top">

                <!-- <div class="logo">
                    <img src="../assets/img/tongjilogo.png">
                </div> -->
                <div class="title">
                    <span>大数据分析后台管理</span>
                </div>

            </div>
            
            <div class="bottom">

               

                <div class="middle">
                    
                    <div class="biaoti">内部类型</div>

                    <div class="quanbu">
                        <div class="kuai">
                            <div class="top">
                                <span>合伙人</span>
                                <span>数量：{{lvshi[0].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in lvshilist.data" :key="vo.Id">{{vo.Staff_Name}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(lvshi[0].parameter,'内部类型','合伙人')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>律师</span>
                                <span>数量：{{lvshi[1].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in lvshilist1.data" :key="vo.Id">{{vo.Staff_Name}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(lvshi[1].parameter,'内部类型','律师')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>顾问</span>
                                <span>数量：{{lvshi[2].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in lvshilist2.data" :key="vo.Id">{{vo.Staff_Name}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(lvshi[2].parameter,'内部类型','顾问')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>实习律师</span>
                                <span>数量：{{lvshi[3].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in lvshilist3.data" :key="vo.Id">{{vo.Staff_Name}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(lvshi[3].parameter,'内部类型','实习律师')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>兼职律师</span>
                                <span>数量：{{lvshi[4].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in lvshilist4.data" :key="vo.Id">{{vo.Staff_Name}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(lvshi[4].parameter,'内部类型','兼职律师')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>行政人员</span>
                                <span>数量：{{lvshi[5].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in lvshilist5.data" :key="vo.Id">{{vo.Staff_Name}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(lvshi[5].parameter,'内部类型','行政人员')">查看更多</div>
                            </div>
                        </div>

                        
                    </div>

                    

                </div>
                <!-- 右侧 -->

                

                    
        

                
            </div>
        </div>
    </div>
</template>
<script>
import qs from 'qs';
export default {
    props: {
   
    },
    data(){
        return{
           
           lvshi:'',
           lvshilist:'',
           lvshilist1:'',
           lvshilist2:'',
           lvshilist3:'',
           lvshilist4:'',
           lvshilist5:'',
        }  
    },
    
    methods:{
        getattorneyStatistical(){
            this.$http.post('/yongxu/Statistics/attorneyStatistical',qs.stringify({parameter:485,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.lvshi = res.data
            })
        },
        getattorneyStatisticallist(){
            this.$http.post('/yongxu/Statistics/attorneyStatisticallist',qs.stringify({parameter:2,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.lvshilist = res.data
            })
        },
        getattorneyStatisticallist2(){
            this.$http.post('/yongxu/Statistics/attorneyStatisticallist',qs.stringify({parameter:4,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.lvshilist1 = res.data
            })
        },
        getattorneyStatisticallist3(){
            this.$http.post('/yongxu/Statistics/attorneyStatisticallist',qs.stringify({parameter:6,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.lvshilist2 = res.data
            })
        },
        getattorneyStatisticallist4(){
            this.$http.post('/yongxu/Statistics/attorneyStatisticallist',qs.stringify({parameter:8,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.lvshilist3 = res.data
            })
        },
        getattorneyStatisticallist5(){
            this.$http.post('/yongxu/Statistics/attorneyStatisticallist',qs.stringify({parameter:13,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.lvshilist4 = res.data
            })
        },
        getattorneyStatisticallist6(){
            this.$http.post('/yongxu/Statistics/attorneyStatisticallist',qs.stringify({parameter:5,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.lvshilist5 = res.data
            })
        },
        chakan(id,type,title){
            this.$router.push({path: '/index/tongjicontent?id=' + id + '&type=' + type + '&title=' + title})
        }
    },
    created(){
       this.getattorneyStatistical()
       this.getattorneyStatisticallist()
       this.getattorneyStatisticallist2()
       this.getattorneyStatisticallist3()
       this.getattorneyStatisticallist4()
       this.getattorneyStatisticallist5()
       this.getattorneyStatisticallist6()
    },
    mounted(){
        
    },
    computed:{
        
    },
    components:{
       
    }
    
}
</script>
<style lang="scss" scoped>

.tongji{
    width: 100%;
    background: #000024;
    
}
.top{
    width: 100%;
    height: calc(10vh);
    display: flex;
    flex-direction:row;
    justify-content:center;
    .logo{
        position: fixed;
        top:15px;
        left: 30px;
        width: 80px;
        height: 80px;
        img{
            width: 80px;
            height: 80px;
        }
    }
    .title{

        span{
            display: block;
            font-size: 22px;
            color:#3ED9D1;
            line-height: calc(10vh);
            letter-spacing: 15px;
            padding:0 30px;
            background: url(../assets/img/444.png) no-repeat center center;
            background-size: 100%;
            width: 450px;
            text-align: center;
        }
    }
}
.bottom{
    width: 100%;
    // height: calc(90vh);
    display: flex;
    flex-direction:row;
    justify-content:space-around;
    box-sizing: border-box;
    .left{
        height: calc(90vh);
        width: 35%;
        padding:10px;
        box-sizing: border-box;
        .content{
            background: #29323B;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            .title{
                color:#3ED9D1;
                font-size: 18px;
                text-align: center;
                padding-top:3vh;
                letter-spacing: 5px;
            }
            .title-tab{
                padding:0 20px;
                box-sizing: border-box;
                width: 100%;
                display: flex;
                flex-direction:row;
                justify-content:space-around;
                color:#fff;
                margin-top:20px;
                font-size: 14px;
                div{
                    width: 50px;
                    text-align: center;
                }
            }
            .anli-list{
                padding:0 20px;
                .list{
                    background: #343C45;
                    display: flex;
                    flex-direction:row;
                    justify-content:space-around;
                    color:#fff;
                    padding:7px 0;
                    border-radius: 5px;
                    margin-top:10px;
                    div{
                        width: 90px;
                        text-align: center;
                    }
                }
            }
        }
    }
    // 左侧
    .middle{
        // height: calc(90vh);
        flex-grow:1;
        padding:10px;
        box-sizing: border-box;
        margin-bottom:10px;
        .top-details{
            width: 100%;
            display: flex;
            flex-direction:row;
            justify-content:space-between;
            .tab{
                width: 33%;
                height: 13vh;
                border-radius: 5px;
                display: flex;
                flex-direction:column;
                color: #fff;
                padding:13px;
                box-sizing: border-box;
                .num{
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    letter-spacing: 3px;
                    margin-top:17px;
                }

            }
            .tab:nth-child(1){
                background: #2C62E6;
            }
            .tab:nth-child(2){
                background: #0DD396;
            }
            .tab:nth-child(3){
                background: #F19149;
                p{
                    display: block;
                    width: 50%;
                    float: left;
                    color:#fff
                }
                p:nth-child(2){
                    text-align: right;
                }
            }
            .tab:nth-child(4){
                background: #FE5E80;
            }
        }
        .biaoti{
            width: 100%;
            color: #fff;
            margin-top:15px;
        }
        .quanbu{
            display: flex;
            flex-direction:row;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-bottom:10px;
        }
        .kuai{
            background: #29323B;
            width: 19%;
            height: 500px;
            border-radius: 10px;
            margin-right:10px;
            margin-top:10px;
            position: relative;
            .top{
               border-bottom:1px solid #585656;
               width: 100%;
               height: 50px;
               display: flex;
                flex-direction:row;
                justify-content: space-between;
                padding: 0 10px;
                box-sizing: border-box;
                align-items:center;
               span:nth-child(1){
                   color:#3ED9D1
               }
               span:nth-child(2){
                   color:#fff
               }
            }
            .listneirong{
                display: flex;
                flex-direction:column;
                color:#fff;
                padding: 10px 10px;
                div{
                    margin-bottom:10px;
                }
            }
            .gengduo{
                width: 100%;
                position: absolute;
                bottom:0px;
                left: 0px;
                height: 40px;
                display: flex;
                justify-content:center;
                .anniu{
                    color:#fff;
                    background: #394148;
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 5px;
                    cursor: pointer;
                }
                .anniu:hover{
                    color:#fff;
                    background: #2C62E6;
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 5px;
                }
            }
        }
        .kuai:nth-child(6){
            background: #29323B;
            width: 19%;
            height: 500px;
            border-radius: 10px;
            margin-right:0;
            margin-top:10px;
        }
    }
    // 中间
    .right{
        width: 25%;
        padding:10px;
        box-sizing: border-box;
        height: calc(90vh);
        .notice{
            height: 10vh;
            background: #29323B;
            border-radius: 5px;
            padding:5px 15px;
            box-sizing: border-box;
            .title{
                color:#3ED9D1;
                font-size: 18px;
            }
            .list{
                color:#fff;
                .swiper-container{
                    height: 6vh;
                    margin-top:1.2vh;
                }
                .sw-list{
                    display: flex;
                    justify-content:space-between;
                    margin-bottom:1vh;
                }
            }
        }
        // 公告
        .dynamic{
            height: 24vh;
            margin-top: 2vh;
            background: #29323B;
            border-radius: 5px;
            padding: 5px 15px;
            box-sizing: border-box;
            .title{
                color:#3ED9D1;
                font-size: 18px;
                margin-top:1vh;
            }
            .list{
                color:#fff;
                .swiper-container{
                    height: 16vh;
                    margin-top:1.2vh;
                }
                .sw-list{
                    display: flex;
                    justify-content:flex-start;
                    margin-bottom:1vh;
                    div{
                        margin-right:2vh;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    div:nth-child(1){
                        width: 20%;
                    }
                    div:nth-child(2){
                        width: 60%;
                    }
                    div:nth-child(3){
                        width: 20%;
                    }
                }
            }
        }
        // 动态
    }
}


.charts{
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    .charts-content{
        width: 49%;
        height: 24vh;
        margin-top:2vh;
        
        box-sizing: border-box;
    }
    .charts-pa{
        background: #29323B;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        padding: 5px 15px;
        box-sizing: border-box;
        position: relative;
        .title{
            color:#3ED9D1;
            font-size: 18px;
            position: absolute;
            top:10px;
        }
        .echartDiv{
            margin:0 auto;
        }
    }
}


// 29323B
</style>

